<template>
  <div class="box">
    <!-- //头部详情信息 -->
    <div class="song-sheet">
      <img :src="playlists.coverImgUrl" class="song-img" />
      <div>
        <Headline :prose="playlists.name" />

        <div class="song-user">
          <div class="user-vip">
            <img :src="playlists.creator.avatarUrl" class="useravatar" />
            <img
              v-show="playlists.creator.avatarDetail"
              :src="playlists.creator.avatarDetail.identityIconUrl"
              class="spritemap"
            />
          </div>
          <a>{{ playlists.creator.nickname }}</a>
          <p>{{ playlists.Time }}创建</p>
        </div>

        <!-- button按钮 -->
        <div class="song-button">
          <el-button-group>
            <el-button type="danger" class="playall" size="small"
              ><i class="el-icon-caret-right"></i>播放全部</el-button
            >
            <el-button
              size="small"
              type="danger"
              icon="el-icon-plus"
              class="song-group"
            ></el-button>
          </el-button-group>

          <el-button round icon="el-icon-folder-add" size="small"
            >收藏（{{ playlists.commentCount }}万）</el-button
          >
          <el-button round icon="el-icon-more" size="small"
            >分享（{{ playlists.shareCount }}万）</el-button
          >
          <el-button round icon="el-icon-download" size="small"
            >下载全部</el-button
          >
        </div>

        <!-- //标签,歌曲 -->
        <div class="song-label">
          <div class="label">
            <span>标签&nbsp;:&nbsp;</span>
            <span class="two" v-for="item in playlists.tags" :key="item">
              <a href="javascript:;">{{ item }}</a>
              <span
                v-show="
                  playlists.tags.length - 1 == item.length ? 'false' : 'true'
                "
                >/</span
              >
            </span>
          </div>
          <div class="play">
            <span>歌曲&nbsp;:&nbsp;</span>
            <span class="psan">{{ playlists.trackCount }}</span>
            <span>播放&nbsp;:&nbsp;</span>
            <span>{{ playlists.playCount }}</span>
          </div>
          <div class="briefintroduction">
            <span>简介&nbsp;:&nbsp;</span>
            <span class="brief">{{ playlists.description }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- //歌曲列表 -->
    <div class="Collector">
      <div class="songlist">
        <p class="comment active">歌曲列表</p>
        <p style="margin-right: 10px; margin-left: 10px" class="comment">
          评论({{ playlists.commentCount }})
        </p>
        <p class="comment">收藏者</p>
      </div>

      <!-- //搜索框 -->
      <div class="search-input">
        <input class="search" v-model="search" />
        <i class="el-icon-search"></i>
        <i v-show="false" class="el-icon-close"></i>
      </div>
    </div>

    <!-- //音乐标题 -->
    <div class="downs">
      <button class="musictitle" @click="musicTitle(1)">音乐标题</button>
      <button class="singer" @click="musicTitle(2)">歌手</button>
      <button class="album" @click="musicTitle(3)">专辑</button>
      <button class="duration" @click="musicTitle(4)">时长</button>
    </div>

    <MusicList
      @click.native="updateMusicIds"
      :dynamicl="playlists.tracks"
      :clicklove="clicklove"
    />
  </div>
</template>

<script>
import "../../assets/iconfont.css";
import MusicList from "./MusicList";
import Headline from "./Headline";
import moment from "moment"; //导入文件

import { mapMutations } from "vuex";
export default {
  name: "Songsheet",
  components: {
    MusicList,
    Headline,
  },
  data() {
    return {
      playlists: { creator: { avatarDetail: {} } },
      orderType: 0,
      isShow: true,
      search: "",
      musicIds: [], //歌曲id
      witch: 1,
      id: "",
    };
  },

  mounted() {
    const { id } = this.$route.query;
    this.id = id;
    this.getPlay();
  },

  methods: {
    ...mapMutations("player", ["UPDATEMUSICIDS"]),
    updateMusicIds() {
      this.UPDATEMUSICIDS(this.musicIds);
    },
    //请求相关歌单推荐
    async getPlay() {
      const { playlist } = await this.$API.recommend.getdynam(this.id);
      console.log(playlist);
      //把dt遍历成时间的格式
      playlist.tracks.forEach((item) => {
        const ds = moment(item.dt).format("mm:ss");
        item.ds = ds;
        // item.index = index + 1;
        item.like = false;
      });
      //创建日期
      let Time = moment(playlist.createTime).format("YYYY-MM-DD");
      playlist.Time = Time;
      if (playlist.creator.avatarDetail === null) {
        playlist.creator.avatarDetail = false;
      }
      //给一个id的数组
      const musicIds = [];
      playlist.tracks.forEach((item) => {
        musicIds.push(item.id);
      });

      this.musicIds = musicIds;
      // 多次操作this 性能不好
      // playlist.tracks.forEach((item, index) => {
      //   this.musicIds[index] = item.id;
      // });

      this.playlists = playlist;
    },

    //升序降序
    musicTitle(orType) {
      this.orderType = orType;
      this.isShow = !this.isShow;
      const { playlists, orderType } = this;
      let arr = playlists.tracks;
      if (orderType !== 0) {
        arr.sort((a, b) => {
          if (orderType === 1 && this.isShow === true) {
            return a.id - b.id;
          } else if (orderType === 1 && this.isShow === false) {
            return b.id - a.id;
          }

          if (orderType === 2 && this.isShow === true) {
            return b.ar[0].id - a.ar[0].id;
          } else if (orderType === 2 && this.isShow === false) {
            return a.ar[0].id - b.ar[0].id;
          }

          if (orderType === 3 && this.isShow === true) {
            return a.al.id - b.al.id;
          } else if (orderType === 3 && this.isShow === false) {
            return b.al.id - a.al.id;
          }

          if (orderType === 4 && this.isShow === true) {
            return a.dt - b.dt;
          } else if (orderType === 4 && this.isShow === false) {
            return b.dt - a.dt;
          }
        });
      }
    },

    //点击爱心图标切换
    async clicklove(id) {
      try {
        await this.$API.recommend.getList(id);
        this.playlists.tracks.forEach((item) => {
          if (item.id === id) {
            item.like = !item.like;
            if (item.like) {
              this.$message.success("已添加到我喜欢的音乐");
            } else {
              this.$message.info("取消喜欢成功");
            }
          }
        });
      } catch (error) {
        console.log(error);
      }
    },

    //点击切换
    clickSwitch(witch) {
      this.switch = witch;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 1020px;
}
//头部详情信息
.song-sheet {
  display: flex;
  .song-img {
    width: 240px;
    height: 240px;
    border-radius: 5px;
    margin-right: 25px;
    margin-left: 15px;
  }
}

.song-user {
  display: flex;
  font-size: 13px;
  a {
    line-height: 45px;
    margin: 0 10px;
    color: darkturquoise;
  }
  a:hover {
    color: dodgerblue;
    cursor: pointer;
  }
  img:hover {
    cursor: pointer;
  }
  p {
    line-height: 44px;
  }
}
.useravatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: 6px;
}
.spritemap {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: relative;
  left: -8px;
}
.song-button {
  margin-top: 5px;
  .playall {
    border-radius: 50px 0 0 50px;
  }
  .song-group {
    border-radius: 0 50px 50px 0;
    margin-right: 10px;
  }
}

//标签,歌曲
.song-label {
  margin-top: 17px;
  font-size: 13px;
  font-weight: normal;
  div {
    margin-bottom: 10px;
  }
}
.song-label .play .psan {
  margin-right: 15px;
}
.song-label .briefintroduction {
  display: flex;
}
.song-label .briefintroduction .brief {
  display: block;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-label .label .two a {
  text-decoration: none;
  color: deepskyblue;
}
.song-label .label .two a:hover {
  color: dodgerblue;
}
a:active {
  text-decoration: none;
}

//歌曲列表
.Collector {
  display: flex;
  justify-content: space-between;
  margin-left: 15px;
  .songlist {
    display: flex;
    .comment {
      margin-right: 5px;
      margin-left: 5px;
    }
  }
  p:hover {
    cursor: pointer;
  }
  p {
    margin-top: 34px;
  }
}
.songlist .comment.active {
  border-bottom: 5px solid red;
}

//搜索框
.search-input {
  line-height: 57px;
}
.search {
  border-radius: 20px;
  background-color: whitesmoke;
  outline: none;
  border: none;
}
.el-icon-search {
  position: relative;
  right: 20px;
  top: 1px;
}

//音乐标题
.downs {
  display: flex;
  justify-content: flex-end;
  button {
    text-align: justify;
    height: 30px;
    outline: none;
    border: none;
    background: #fff;
    font-weight: lighter;
    font-size: 14px;
  }
  button:hover {
    background-color: darkgray;
  }
}
.musictitle {
  width: 370px;
}
.singer {
  width: 200px;
}
.album {
  width: 250px;
}
.duration {
  width: 100px;
}
</style>
